<template>
	<div class="inner-container">
		<div id="map">
			<div id="popup" class="ol-popup">
				<div id="popup-content">
				</div>
			</div>
		</div>
		<div id="searchbox" class="clearfix">
			<div id="searchbox-container">
				<div id="sole-searchbox-content" class="searchbox-content">
					<input id="sole-input" class="searchbox-content-common" type="text" name="word" autocomplete="off" maxlength="256" placeholder="搜项目"  v-model="searchText">
					<div class="input-clear" title="清空"></div>
				</div>
			</div>
			<button id="search-button" data-title="搜索" @click="queryProject"></button>
		</div>
		<div class="operatebar commontool">
			<div class="middlebox">
				<div class="editbtn" id="roadnetworktool" @click="layerChange('vec_c')">
					<i class="iconfont icon-luwang1"></i>
					<span>矢量</span>
				</div>
				<div class="editbtn" id="planettool" @click="layerChange('img_c')">
					<i class="iconfont icon-weixing"></i>
					<span>影像</span>
				</div>
				<div class="editbtn" id="layerstool" @click="panelVisible">
					<i class="iconfont icon-tuceng"></i>
					<span>图层</span>
				</div>
				<div class="editbtn" id="overduetool">
					<i class="iconfont icon-yuqi"></i>
					<span>逾期</span>
				</div>
				<div class="editbtn" id="fullextenttool" @click="fullExtent">
					<i class="iconfont icon-quantu"></i>
					<span>全图</span>
				</div>
				<div class="editbtn" id="distancetool" @click="measureDistance">
					<i class="iconfont icon-celiang1"></i>
					<span>测距</span>
				</div>
				<div class="editbtn" id="areatool" @click="measureArea">
					<i class="iconfont icon-mianji"></i>
					<span>面积</span>
				</div>
				<div class="editbtn" id="cleartool" @click="clearMap">
					<i class="iconfont icon-clean"></i>
					<span>清除</span>
				</div>
				<div class="editbtn" id="printtool" style="border: none;">
					<i class="iconfont icon-dayins"></i>
					<span>打印</span>
				</div>
			</div>
		</div>
		<div class="messagebox">
			<div class="personmessage">
				<i class="iconfont icon-xiaoxi"></i>
			</div>
		</div>
		<div class="userphoto" @click="checkUserInfo">
			<div class="photo"></div>
		</div>
		<div class="userinfo" v-show="visibility.isUserInfoShow">
			<div class="topinfo">
				<div class="userphoto"></div>
				<div class="username">
					<span>港管委</span>
				</div>
			</div>
			<div class="middleinfo"></div>
			<div class="bottominfo">
				<span @click="quitSystem">退出账号</span>
			</div>
		</div>
		<div class="legendbox" id="legendbox" style="display:block;padding: 10px;background-color: rgba(0,0,0,0.55);">
			<ul id="legendlist" class="legendlist">
				<li class="legenditem" id="ybltdsyzitem" @click="landLayerChange($event)">
					<div id="ybltdsyzLayer" class="disactive">
					</div>
					<span>已办理土地使用证</span>
				</li>
				<li class="legenditem" id="qdydpwitem" @click="landLayerChange($event)">
					<div id="qdydpwLayer" class="disactive">
					</div>
					<span>取得用地批文</span>
				</li>
				<li class="legenditem" id="zjggzbitem" @click="landLayerChange($event)">
					<div id="zjggzbLayer" class="disactive">
					</div>
					<span>增减挂钩指标</span>
				</li>
				<li class="legenditem" id="fhtdlyghitem" @click="landLayerChange($event)">
					<div id="fhtdlyghLayer" class="disactive">
					</div>
					<span>符合土地利用规划</span>
				</li>
				<li class="legenditem" id="ytjjsqitem" @click="landLayerChange($event)">
					<div id="ytjjsqLayer" class="disactive">
					</div>
					<span>有条件建设区</span>
				</li>
				<li class="legenditem" id="ybntitem" @click="landLayerChange($event)">
					<div id="ybntLayer" class="disactive">
					</div>
					<span>一般农田</span>
				</li>
			</ul>
		</div>

		<div class="chart-label chart-label-small" id="aui-mapTitle" v-show="visibility.isLayerGroupShow">
			<div class="check-box" id="chkmain">
				<ul id="checkbox" style="border: solid 1px #ccc;">
					<li>
						<input type="checkbox" id="zhcycLayer" class="chk" @click="refLayerChange($event)" /><label for="zhcycLayer"></label>智慧产业城
					</li>
					<li>
						<input type="checkbox" id="lgfwyjjqLayer" class="chk" @click="refLayerChange($event)" /><label for="lgfwyjjqLayer"></label>临港服务业集聚区
					</li>
					<li>
						<input type="checkbox" id="zmqfwLayer" class="chk" @click="refLayerChange($event)" /><label for="zmqfwLayer"></label>自贸区青白江片区
					</li>
					<li>
						<input type="checkbox" id="tlgyqfwLayer" class="chk" @click="refLayerChange($event)" /><label for="tlgyqfwLayer"></label>成都国际铁路港园区范围
					</li>
					<li>
						<input type="checkbox" id="dlxLayer" class="chk" @click="refLayerChange($event)" /><label for="dlxLayer"></label>电力线路
					</li>
					<li>
						<input type="checkbox" id="bdzLayer" class="chk" @click="refLayerChange($event)" /><label for="bdzLayer"></label>变电站
					</li>
				</ul>
			</div>
		</div>
		<map-info v-if="showInfo" :projectInfo="projectInfo"></map-info>
		<map-search ref="searchPanel" v-show="showResult" :searchText="searchText"></map-search>
		<info-edit v-if="showEdit" :showDialogId="showDialogId" :showDialog.sync="showEdit"></info-edit>
	</div>
</template>

<script>
	import mapInfo from '../views/Project/projectmapDialog/MapInfo.vue'
	import mapSearch from '../views/Project/projectmapDialog/MapSearch.vue'
	import infoEdit from '../views/Project/projectinfoDialog/InfoEdit.vue'

	import '../../../static/js/measure.js'

	import '../../../static/data/landdata.js'

	var map = null;

	export default {
		components: {
			mapInfo,
			mapSearch,
			infoEdit
		},
		data() {
			return {
				showInfo: false,
				showResult: false,
				showEdit: false,
				overlay: null, //弹出框
				menu_overlay: null, //右键菜单
				roadlayer: null, //路网
				labellayer: null, //标注
				imglayer: null, //卫星图
				measuretool: null, //测量工具
				landGroupLayer: {}, //土地图层组
				refGroupLayer: {}, //参考图层组
				projectLayer: null, //项目图层
				GeoJsonData: GeoJsonData,
				LayerGroup: LayerGroup,
				visibility: {
					isLayerGroupShow: false, //图层控制面板
					isUserInfoShow: false, //
				},
				highLightLayer: null, //高亮图层
				showDialogId: '', //显示对于dialogID
				searchText: '', //查询条件
				projectInfo: null, //
			}
		},
		mounted() {
			//
			setTimeout(() => {
				this.addMap();
			}, 1000)
		},
		watch: {
			dialogVisibles(val) {
				this.$emit('update:showDialog', val)
			}
		},
		methods: {
			addMap() { //添加地图
				this.overlay = new ol.Overlay(({
					element: document.getElementById('popup'),
					autoPan: true,
					autoPanAnimation: {
						duration: 250
					}
				}));
				this.roadlayer = new ol.layer.Tile({
					visible: false,
					source: new ol.source.XYZ({
						projection: ol.proj.get('EPSG:4326'),
						url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}'
					})
				});
				this.labellayer = new ol.layer.Tile({
					visible: false,
					source: new ol.source.XYZ({
						projection: ol.proj.get('EPSG:4326'),
						url: 'http://t0.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}'
					})
				});
				this.imglayer = new ol.layer.Tile({
					source: new ol.source.XYZ({
						projection: ol.proj.get('EPSG:4326'),
						url: '	http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}'
					})
				});
				//初始化地图
				map = new ol.Map({
					target: 'map',
					overlays: [this.overlay],
					layers: [this.roadlayer, this.imglayer, this.labellayer],
					view: new ol.View({
						center: [104.25897388, 30.81351971],
						extent: [104.15, 30.65, 104.5, 31],
						projection: ol.proj.get('EPSG:4326'),
						enableRotation: false,
						zoom: 12,
						minZoom: 12,
						maxZoom: 16
					})
				});
				this.addBorder(); //青白江边界
				this.initGroupLayer(); //初始化图层组
				this.initMenuOverlayer(); //初始化右键菜单
				this.addProjectLayer(); //加载项目图层
				this.initHighLightLayer();
				this.addProject(); //在线请求项目
			},
			addLand(propertyId) {
				this.ajax({
					url: 'tLand/showLand',
					data: {
						propertyId: propertyId
					},
					success: function(data) {
						var features = [];
						for(var i = 0; i < data.length; i++) {
							if(!data[i].wkt) continue;
							var feature = (new ol.format.WKT()).readFeature(data[i].wkt);
							feature.setStyle(this.getStackedStyle(propertyId));
							features.push(feature);
						}
						this.refGroupLayer[propertyId].getSource().addFeatures(features);
					}
				})
			},
			addProject() {
				this.projectLayer.getSource().clear();
				this.ajax({
					url: 'tProject/showProject',
					success: function(data) {
						var features = [];
						for(var i = 0; i < data.length; i++) {
							if(!data[i].wkt) continue;
							var feature = (new ol.format.WKT()).readFeature(data[i].wkt, {
								dataProjection: 'EPSG:3857',
								featureProjection: 'EPSG:4326'
							});
							feature.set('layerid', 'projectlayer');
							feature.set('id', data[i].id);
							feature.set('name', data[i].name);
							features.push(feature);
						}
						this.projectLayer.getSource().addFeatures(features);
					}
				})
			},
			queryProject() { //搜索
				this.showInfo = false;
				this.showResult = true;
				this.$refs.searchPanel.queryList();
			},
			queryProjectDeatil(id) {
				this.ajax({
					url: 'projectBasicInfo/getProjectInfo',
					data: {
						id: id
					}
				}).then(data => {
					if(!data) return false;
					
					if(data.projectBasicInfo[0].imagePaths) {
						var imgs = data.projectBasicInfo[0].imagePaths.split('###');
						var imgList = [];
						for(var i = 0; i < imgs.length; i++) {
							if(imgs[i]) {
								imgList.push({
									url: imgs[i]
								})
							}
						}
						data.projectBasicInfo[0].imagePaths = imgList;
					}

					this.projectInfo = data;
					this.showInfo = true;
					this.showResult = false;
				})
			},
			locationMap(wkt) { //定位到项目
				var feature = (new ol.format.WKT()).readFeature(wkt, {
					dataProjection: 'EPSG:3857',
					featureProjection: 'EPSG:4326'
				});
				var extent = feature.getGeometry().getExtent();
				var center = [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2];
				map.getView().animate({
					center: center
				}, {
					zoom: 16
				});
			},
			initMenuOverlayer() { //初始化右键菜单
				$(map.getViewport()).on("click", (evt) => {
					evt.preventDefault();
					this.overlay.setPosition(undefined);
					this.showInfo = false;
					this.highLightLayer.getSource().clear();
					var feature = map.forEachFeatureAtPixel([evt.offsetX, evt.offsetY],
						function(feature) {
							return feature;
						});
					if(feature && feature.get('layerid') == 'projectlayer') {
						var highfeature = feature.clone();
						this.highLightLayer.getSource().addFeature(highfeature);
						var coordinate = map.getEventCoordinate(evt);
						var content = document.getElementById('popup-content');
						content.innerHTML = '<div style="font-weight:600">' + highfeature.get('name') + '</div>';
						this.overlay.setPosition(coordinate);
						this.queryProjectDeatil(highfeature.get('id'));
					}
				});
			},
			initHighLightLayer() {
				this.highLightLayer = new ol.layer.Vector({
					source: new ol.source.Vector({
						wrapX: false,
						features: []
					}),
					style: new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: '#0093E8',
							width: 5
						}),
						fill: new ol.style.Fill({
							color: 'rgba(0,147,232,0.2)'
						})
					})
				});
				map.addLayer(this.highLightLayer);
			},
			initGroupLayer() { //初始化地图图层
				for(var i = 0; i < this.LayerGroup.length; i++) {
					this.refGroupLayer[this.LayerGroup[i].name] = new ol.layer.Vector({
						source: new ol.source.Vector({
							wrapX: false,
							features: []
						}),
						style: new ol.style.Style({
							image: new ol.style.Icon({
								anchor: [0.5, 1],
								anchorXUnits: 'fraction',
								anchorYUnits: 'fraction',
								src: '../../../static/img/station.png'
							}),
							stroke: new ol.style.Stroke({
								color: this.LayerGroup[i].color,
								width: 2
							}),
							fill: new ol.style.Fill({
								color: this.LayerGroup[i].color
							})
						})
					});
					map.addLayer(this.refGroupLayer[this.LayerGroup[i].name]);
				}
			},
			layerChange(layertype) { //卫星/矢量图切换
				if(layertype == 'vec_c') {
					this.roadlayer.setVisible(true);
					this.labellayer.setVisible(true);
					this.imglayer.setVisible(false);
					$('#roadnetworktool').css('color', '#2C9EFF');
					$('#planettool').css('color', '#7B8095');
				} else {
					this.roadlayer.setVisible(false);
					this.labellayer.setVisible(false);
					this.imglayer.setVisible(true);
					$('#planettool').css('color', '#2C9EFF');
					$('#roadnetworktool').css('color', '#7B8095');
				}
			},
			fullExtent() { //全图
				map.getView().animate({
					center: [104.25897388, 30.81351971]
				}, {
					zoom: 12
				});
			},
			measureDistance() { //测距
				if(!this.measuretool) {
					this.measuretool = new MeasureTool(map);
				}
				this.measuretool.addInteraction('LineString');
			},
			measureArea() { //测面积
				if(!this.measuretool) {
					this.measuretool = new MeasureTool(map);
				}
				this.measuretool.addInteraction('Polygon');

			},
			clearMap() { //清除图层
				if(this.measuretool) {
					this.measuretool.clearMap();
				}
			},
			panelVisible() { //图层面板显示与隐藏
				this.visibility.isLayerGroupShow = !this.visibility.isLayerGroupShow;
				if(this.visibility.isLayerGroupShow) {
					$('#layerstool').css('color', '#2C9EFF');
				} else {
					$('#layerstool').css('color', '#7B8095');
				}
			},
			checkUserInfo() { //查看用户信息
				this.visibility.isUserInfoShow = !this.visibility.isUserInfoShow;
			},
			quitSystem() {
				this.$router.push({
					path: "/login"
				});
			},
			addBorder() { //添加青白江区县界
				var format = new ol.format.WKT();
				var borderfeature = format.readFeature('POLYGON((104.22716 30.8972,104.24276 30.8993,104.25956 30.9079,104.28306 30.9019,104.28556 30.9052,104.30866 30.9001,104.32076 30.8944,104.32836 30.9022,104.34046 30.9033,104.34936 30.9036,104.34866 30.8978,104.35796 30.8888,104.37016 30.888,104.37956 30.879,104.38416 30.8662,104.37486 30.8567,104.37586 30.8465,104.36356 30.8497,104.34786 30.8446,104.35176 30.8358,104.36766 30.8411,104.37326 30.8342,104.36706 30.8235,104.37046 30.8123,104.38166 30.7937,104.39106 30.7871,104.40586 30.7827,104.41616 30.7917,104.42926 30.7885,104.45196 30.7755,104.46456 30.7827,104.47376 30.7752,104.47196 30.7652,104.47586 30.7405,104.46866 30.7225,104.48176 30.7154,104.48596 30.7027,104.48036 30.7002,104.49426 30.6861,104.48056 30.681,104.47836 30.6628,104.46236 30.6664,104.44626 30.6604,104.43426 30.6648,104.43416 30.6736,104.41756 30.6835,104.39906 30.672,104.38846 30.6788,104.38996 30.6926,104.38066 30.6981,104.35586 30.6994,104.33906 30.7095,104.33166 30.7087,104.31996 30.7189,104.32676 30.7374,104.31896 30.7484,104.28776 30.7482,104.28246 30.7402,104.26556 30.7449,104.25756 30.7581,104.26486 30.7619,104.26456 30.7757,104.25606 30.7792,104.25656 30.7918,104.23986 30.8085,104.22896 30.8247,104.23686 30.8417,104.23556 30.8574,104.21546 30.8678,104.20726 30.8672,104.19686 30.8597,104.17176 30.8679,104.16766 30.8892,104.17686 30.8914,104.18616 30.9124,104.19936 30.9152,104.22716 30.8972))');
				//青白江区县边界
				var borderlayer = new ol.layer.Vector({
					source: new ol.source.Vector({
						wrapX: false,
						features: [borderfeature]
					}),
					style: new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: '#005CD5',
							width: 2
						}),
						text: new ol.style.Text({
							textAlign: 'center',
							offsetX: 0,
							offsetY: 0,
							textBaseline: 'middle',
							font: 'bold 20px 微软雅黑',
							text: '青白江',
							fill: new ol.style.Fill({
								color: '#fff'
							}),
							backgroundFill: new ol.style.Fill({
								color: '#BB7A4A'
							}),
							backgroundStroke: new ol.style.Stroke({
								color: '#fff',
								width: 1
							}),
							padding: [1, 5, 3, 5]
						})
					})
				});
				map.addLayer(borderlayer);
			},
			addProjectLayer() {
				this.projectLayer = new ol.layer.Vector({
					source: new ol.source.Vector({
						wrapX: false,
						features: []
					}),
					style: function(feature, resolution) {
						var text = '';
						if(resolution < 12) {
							text = feature.get('name');
						}
						var style = new ol.style.Style({
							stroke: new ol.style.Stroke({
								color: 'red',
								width: 2
							}),
							fill: new ol.style.Fill({
								color: 'rgba(255, 255, 0, 0.001)'
							}),
							text: new ol.style.Text({
								textAlign: 'center',
								offsetX: 0,
								offsetY: 0,
								textBaseline: 'middle',
								font: 'normal 14px 微软雅黑',
								text: text,
								fill: new ol.style.Fill({
									color: '#53A778'
								}),
								stroke: new ol.style.Stroke({
									color: '#fff',
									width: 0.5
								})
							})
						});
						return style;
					}
				});
				map.addLayer(this.projectLayer);
			},
			landLayerChange(event, geojsondata) {
				if(event.target.className == 'disactive') {
					$(event.target).removeClass('disactive').addClass('legend');
					if(this.refGroupLayer[event.target.id].getSource().getFeatures().length) {
						this.refGroupLayer[event.target.id].setVisible(true);
					} else {
						for(var i = 0; i < this.LayerGroup.length; i++) {
							if(this.LayerGroup[i].name == event.target.id) {
								this.addLand(event.target.id);
								return false;
							}
						}
					}
				} else {
					$(event.target).removeClass('legend').addClass('disactive');
					if(this.refGroupLayer[event.target.id]) {
						this.refGroupLayer[event.target.id].setVisible(false);
					}
				}
			},
			refLayerChange(event) { //参考图层图岑控制
				if(event.target.checked) {
					if(this.refGroupLayer[event.target.id].getSource().getFeatures().length) {
						this.refGroupLayer[event.target.id].setVisible(true);
					} else {
						for(var i = 0; i < this.LayerGroup.length; i++) {
							if(this.LayerGroup[i].name == event.target.id) {
								var features = this.formatGeoJson(this.LayerGroup[i].data, 'EPSG:3857', 'EPSG:4326');
								this.refGroupLayer[event.target.id].getSource().addFeatures(features);
								return false;
							}
						}
					}
				} else {
					if(this.refGroupLayer[event.target.id]) {
						this.refGroupLayer[event.target.id].setVisible(false);
					}
				}
			},
			formatGeoJson(geojson, source, destination, layerid) { //geojosn转features
				var features = [];
				if(JSON.stringify(geojson) == '{}') return features;
				if(source && destination) {
					features = (new ol.format.GeoJSON()).readFeatures(geojson, {
						dataProjection: source,
						featureProjection: destination
					});
				} else {
					features = (new ol.format.GeoJSON()).readFeatures(geojson);
				}
				if(!layerid) {
					return features;
				}
				for(var i = 0; i < features.length; i++) {
					features[i].set('layerid', layerid);
				}
				return features;
			},
			getStackedStyle(type, text) {
				var fill = new ol.style.Fill();
				var style = null;
				if(!text) {
					style = new ol.style.Style({
						fill: fill,
						stroke: new ol.style.Stroke({
							color: '#FFF',
							width: 1
						})
					});
				} else {
					style = new ol.style.Style({
						fill: fill,
						stroke: new ol.style.Stroke({
							color: '#FFF',
							width: 1
						}),
						text: new ol.style.Text({
							textAlign: 'middle',
							offsetX: 0,
							offsetY: 0,
							textBaseline: 'center',
							font: 'normal 10px 微软雅黑',
							text: text,
							fill: new ol.style.Fill({
								color: '#fff'
							}),
						})
					});
				}
				fill.setColor(this.setStyleColor(type));
				return style;
			},
			setStyleColor(type) {
				if(type == 'ybltdsyzLayer') {
					return 'rgba(255,255,127, 0.6)';
				} else if(type == 'qdydpwLayer') {
					var canvas = document.createElement('canvas');
					var context = canvas.getContext('2d');
					canvas.width = 20;
					canvas.height = 34.64;
					context.moveTo(0, 0);
					context.lineTo(20, 0);
					context.moveTo(0, 17.32);
					context.lineTo(20, 17.32);
					context.moveTo(0, 0);
					context.lineTo(20, 34.64);
					context.moveTo(20, 0);
					context.lineTo(0, 34.64);
					context.moveTo(0, 34.64);
					context.lineTo(20, 34.64);
					context.lineWidth = 1;
					context.strokeStyle = 'rgba(0,255,255,1)';
					context.stroke();
					return context.createPattern(canvas, 'repeat');
				} else if(type == 'zjggzbLayer') {
					return 'rgba(243,120,155, 0.6)';
				} else if(type == 'fhtdlyghLayer') {
					return 'rgba(166,13,64, 0.6)';
				} else if(type == 'ytjjsqLayer') {
					var canvas = document.createElement('canvas');
					var context = canvas.getContext('2d');
					canvas.width = 20;
					canvas.height = 20;
					context.moveTo(2.5, 5);
					context.lineTo(7.5, 5);
					context.moveTo(5, 2.5);
					context.lineTo(5, 7.5);
					context.moveTo(12.5, 15);
					context.lineTo(17.5, 15);
					context.moveTo(15, 12.5);
					context.lineTo(15, 17.5);
					context.strokeStyle = 'rgba(0,255,255,1)';
					context.stroke();
					return context.createPattern(canvas, 'repeat');
				}
			}
		}
	}
</script>

<style scoped lang="less">
	@import url("../../../static/css/map.css");
	.commontool {
		right: 152px;
	}
	
	#aui-mapTitle {
		right: 34.4em;
	}
	
	.inner-container {
		position: relative;
		height: 100%;
		width: 100%;
	}
	
	.submain {
		height: 520px;
		width: 760px;
		background: #fff;
		position: relative;
	}
	
	.mapdiglog .el-form-item__error {
		top: 35px;
		left: 100px;
	}
	
	.mapdiglog .el-form-item {
		min-height: 50px;
		margin-bottom: 5px;
	}
	
	.zui-noFloat .el-col {
		float: none;
		display: inline-block;
		margin-right: -4px;
		vertical-align: top;
	}
	
	.projectDialog .desc-input {
		width: 70%;
		float: left;
	}
	
	.ol-popup {
		position: absolute;
		background-color: white;
		-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
		filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
		padding: 15px;
		/*border-radius: 10px;*/
		/*border: 1px solid #cccccc;*/
		bottom: 12px;
		left: -50px;
		min-width: 220px;
	}
	
	.ol-popup:after,
	.ol-popup:before {
		top: 100%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}
	
	.ol-popup:after {
		border-top-color: white;
		border-width: 10px;
		left: 48px;
		margin-left: -10px;
	}
	
	.ol-popup:before {
		border-top-color: #cccccc;
		border-width: 11px;
		left: 48px;
		margin-left: -11px;
	}
	
	.ol-popup-closer {
		text-decoration: none;
		position: absolute;
		top: 2px;
		right: 8px;
	}
	
	.ol-popup-closer:after {
		content: "✖";
	}
</style>